<template>
<div class="box">
  <Header :addL="addL"></Header>
  <List :todos="todos" :deleteI="deleteI" />
  <Ft :todos="todos" :updateTodos="updateTodos" :deleteChooseAll="deleteChooseAll"></Ft>
</div>
</template>

<script lang="ts">
import { defineComponent, ref, reactive, toRefs, provide } from "vue";
import {Todo} from "@/types/todo.ts"
import Header from '@/views/demo/components/Header.vue'
import Ft from '@/views/demo/components/Footer.vue'
import List from '@/views/demo/components/List.vue'
export default defineComponent({
  name:'todolist',
  components:{
    Header,
    Ft,
    List
  },
  setup(){
    const state = reactive<{todos:Todo []}>({
      todos:[{
        id:1,
        title:'小明',
        isCheck:false
      },{
        id:2,
        title:"小红",
        isCheck:true
      }]
    })
    const addL = (todo:Todo)=>{
      state.todos.unshift(todo)
    }
    const updateTodos = (flag:boolean) =>{
      state.todos.forEach(todo=>{
        todo.isCheck = flag;
      })
    }
    const deleteI = (index:number) => {
      state.todos.splice(index,1)
    }
    const deleteChooseAll = ()=>{
      state.todos = state.todos.filter(todo=>!todo.isCheck)
    }
    return{
      ...toRefs(state),
      addL,
      updateTodos,
      deleteI,
      deleteChooseAll
    }
  }
})
</script>

<style lang="less" scoped>
.box{
  width:450px;
  box-sizing: border-box;
  padding:15px;
  border:solid 1px #ddd;
  margin:0 auto;
}
</style>
